<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打字机效果(css)</title>
    <style>
      h1 {
        /* 本例12个文字(加标点符号)；有多少个文字，width就是多少个em */
        width: 12em;
        /* 加上两个动画，一个是打字动画，使用steps让字一个一个的出现，
             注意step和字数保持一致，光标动画也是同理，*/
        animation: typingWords 5s steps(12) infinite, cursor 0.5s steps(1) infinite;
        /* 要设置不允许换行，且溢出隐藏 */
        white-space: nowrap;
        overflow: hidden;
        /* 使用右边框作为打印的指针光标 */
        border-right: 1px solid #000;
      }

      @keyframes typingWords {
        0% {
          width: 0;
        }
      }

      @keyframes cursor {
        50% {
          border-color: transparent;
        }
      }
    </style>
  </head>

  <body>
    <h1>欢迎光临呐，各位访客们。</h1>
    <!-- css大佬张鑫旭的实现方式：https://www.zhangxinxu.com/wordpress/2019/01/css-typewriter-effect/ -->
  </body>
</html>
